<template>
  <el-container class="">
    <el-header style="text-align: right; font-size: 12px">
      <div class="toolbar">
        <el-input v-model="sousuo"
                  style="width: 260px"
                  placeholder="输入用户名或手机号"
                  prefix-icon="Search"
                  clearable />
        <p class="but sousuo"
           @click="search()">搜索</p>
        <p class="but sousuo"
           @click="chongzhi()">重置</p>
      </div>
    </el-header>

    <el-main>
      <el-scrollbar>
        <el-table :data="userlist"
                  empty-text="暂无数据">
          <el-table-column label="头像"
                           width="100">
            <template #default="scope">
              <img :src="scope.row.head_img"
                   alt="用户头像"
                   style="width: 50px; height: 50px; border-radius: 50%;">
            </template>
          </el-table-column>
          <el-table-column prop="username"
                           label="用户名"
                           width="160" />
          <el-table-column prop="gender"
                           label="性别"
                           width="120" />
          <el-table-column prop="phone"
                           label="手机号"
                           width="140" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small"
                         @click="handleEditpass(scope.row.username,1)">重置密码</el-button>
              <el-button size="small"
                         @click="handleEdittou(scope.row.username,2)">重置头像</el-button>
              <el-button size="small"
                         type="danger"
                         @click="handleDelete(scope.row.username,3)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
    <el-dialog v-model="centerDialogVisible"
               :close-on-click-modal="false"
               :title="Warning"
               width="500"
               center>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="queding()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>



<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/axios'
let list = ref([])
let userlist = ref([])
//搜索
let sousuo = ref('')
const search = () => {
  if (sousuo.value == '') {
    ElMessage({
      message: '搜索内容为空，请重新输入。',
      type: 'error'
    })
  } else {
    userlist.value = list.value.filter((item) => {
      return item.username.includes(sousuo.value) || item.phone.includes(sousuo.value)
    })
    if (userlist.value.length == 0) {
      userlist.value = list.value
      ElMessage({
        message: '未找到相关内容，请重新输入。',
        type: 'error'
      })
    }
  }
}
const chongzhi = () => {
  userlist.value = list.value
  sousuo.value = ''
}
let Warning = ref('')
let butindex = ref('')
let user = ref('')
let centerDialogVisible = ref(false)
//重置头像
const handleEdittou = (username, index) => {
  user.value = username
  butindex.value = index
  centerDialogVisible.value = true
  Warning.value = `确定重置用户${username}的头像？`
}

//重置密码
const handleEditpass = (username, index) => {
  user.value = username
  butindex.value = index
  centerDialogVisible.value = true
  Warning.value = `确定重置用户${username}的密码？`
}
//删除
const handleDelete = (username, index) => {
  user.value = username
  butindex.value = index
  centerDialogVisible.value = true
  Warning.value = `确定删除用户${username}？`
}
let queding = () => {
  if (butindex.value == 1) {
    centerDialogVisible.value = false
    axios
      .post('/czpass', { username: user.value })
      .then((d) => {
        if (d == '重置密码成功！') {
          ElMessage({
            message: `用户${user.value}的密码已重置为abc23。`,
            type: 'success'
          })
        }
      })
      .catch((err) => console.log(err))
  } else if (butindex.value == 2) {
    centerDialogVisible.value = false
    axios
      .post('/czimg', { username: user.value })
      .then((d) => {
        if (d == '重置头像成功！') {
          ElMessage({
            message: `用户${user.value}的头像已重置。`,
            type: 'success'
          })
          axios
            .get('/users')
            .then((d) => {
              //过滤数据
              list.value = d
              userlist.value = list.value
              // console.log(userlist.value)
            })
            .catch((err) => console.log(err))
        }
      })
      .catch((err) => console.log(err))
  } else if (butindex.value == 3) {
    centerDialogVisible.value = false
    axios
      .post('/usershan', { username: user.value })
      .then((d) => {
        if (d == '用户删除成功！') {
          ElMessage({
            message: `用户${user.value}已删除。`,
            type: 'success'
          })
          axios
            .get('/users')
            .then((d) => {
              //过滤数据
              list.value = d
              userlist.value = list.value
              // console.log(userlist.value)
            })
            .catch((err) => console.log(err))
        }
      })
      .catch((err) => console.log(err))
  }
  sousuo.value = ''
}
onMounted(() => {
  axios
    .get('/users')
    .then((d) => {
      //过滤数据
      list.value = d
      userlist.value = list.value
      // console.log(userlist.value)
    })
    .catch((err) => console.log(err))
})
</script>

<style scoped lang="less">
.sousuo {
  width: 60px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin-left: 10px;
  padding: 0 10px;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: #cdbf62;
  color: var(--el-text-color-primary);
}
</style>

